<template>
  <div class="app-container" @click="hideContextMenu">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="品牌" prop="autofeedingBand">
        <el-input
          v-model="queryParams.autofeedingBand"
          placeholder="请输入气体交换机品牌"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
<!--      <el-form-item label="设备ID" prop="autofeedingId">-->
<!--        <el-input-->
<!--          v-model="queryParams.autofeedingId"-->
<!--          placeholder="请输入气体交换机型号"-->
<!--          clearable-->
<!--          style="width: 240px"-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
      <el-form-item label="栏舍编码" prop="phouseCode">
        <el-select v-model="queryParams.phouseCode" clearable filterable placeholder="请输入设备编码"
                   @keyup.enter.native="handleQuery"
        >
          <el-option

            v-for="item in autofeedingList"
            :key="item.phouseCode"
            :label="item.phouseCode"
            :value="item.phouseCode"/>
        </el-select>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['equipment:autofeeding:add']"
        >新增
        </el-button>
      </el-col>
      <!--      <el-col :span="1.5">
              <el-button
                type="success"
                plain
                icon="el-icon-edit"
                size="mini"
                :disabled="single"
                @click="handleUpdate"
                v-hasPermi="['equipment:autofeeding:edit']"
              >修改
              </el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="danger"
                plain
                icon="el-icon-delete"
                size="mini"
                :disabled="multiple"
                @click="handleDelete"
                v-hasPermi="['equipment:autofeeding:delete']"
              >删除
              </el-button>
            </el-col>-->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <!--    去掉 列表形式 转换成盒子模块形式-->
    <el-row :gutter="20">
      <el-col :span="1" style="margin-top: 100px;margin-left: 20px">
        <svg class="icon" height="100" p-id="7126" t="1708502749876" version="1.1"
             viewBox="0 0 1024 1024" width="64" xmlns="http://www.w3.org/2000/svg" @click="goleft">
          <path
            d="M745.09774 1024L232.934734 512.163005 745.09774 0l45.967526 45.967526-465.869468 466.195479L791.065266 978.032474l-45.967526 45.967526z"
            fill="#dbdbdb" p-id="7127"></path>
        </svg>
      </el-col>
      <el-col :span="20">
        <div class="scroll-container" @wheel="handleWheel">
          <el-row :gutter="30" class="table-body" style="margin-left: 20px;margin-right:20px ">
            <el-col v-for="(item, index) in autofeedingList" :key="index"
                    :span="5"
                    class="function-card emessage-div"
                    style="margin-top: 20px"

            >
              <div @click="showDetails(item)"
                   @contextmenu.prevent="$event.preventDefault(); showContextMenu($event, item)">
                <el-card :body-style="{ padding: '0px' }" class="parent-icon" shadow="hover">

                  <i v-if="item.autofeedingStart==='1'" class="el-icon-success green-icon" title="运行"
                     @click.stop="icoeUp(item)"></i>
                  <!-- 否则，显示el-icon-circle-cross图标 -->
                  <!--            <i v-else-if="item.fansState==='2'" class="el-icon-warning orange-icon" @click.stop="icoeUp(item)"
                                 title="故障"></i>-->
                  <i v-else-if="item.autofeedingStart==='2'" class="el-icon-error rea-icon" title="关闭"
                     @click.stop="icoeUp(item)"></i>


                  <!--              <img src="/src/assests/images/scrape.png" height="140"/>-->
                  <svg class="icon" height="140" p-id="12828" t="1708426416335"
                       version="1.1"
                       viewBox="0 0 1059 1024" width="200" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M832.333072 353.332978a17.649132 17.649132 0 0 0-20.296502 14.64878l-13.589832 82.244956-49.241078-24.532294a17.649132 17.649132 0 0 0-15.354745 0 17.649132 17.649132 0 0 0-9.707023 11.824919l-17.649132 70.596528a17.649132 17.649132 0 0 0 12.883866 21.708433 17.649132 17.649132 0 0 0 21.884924-13.413341l12.354393-49.241078 50.8295 25.41475a17.649132 17.649132 0 0 0 15.884219 0 17.649132 17.649132 0 0 0 9.530532-12.883867l17.649132-105.894792a17.649132 17.649132 0 0 0-15.178254-20.472994zM797.034808 547.473432a17.649132 17.649132 0 0 0-15.354745 4.941757l-52.947397 52.947396a17.719729 17.719729 0 1 0 25.061768 25.061768l35.298264-35.298264 24.355803 48.711604a17.649132 17.649132 0 0 0 12.883866 9.530532H829.509211a17.649132 17.649132 0 0 0 12.530884-5.118248l70.596529-70.596529a17.719729 17.719729 0 0 0-25.061768-25.061768l-52.947397 52.947397-24.355802-48.711605a17.649132 17.649132 0 0 0-13.236849-9.35404zM723.614418 187.96061a17.649132 17.649132 0 0 0 11.471936-4.235792 342.393164 342.393164 0 0 1 46.417218-33.003877 38.122125 38.122125 0 0 1 43.240373 30.356507 17.649132 17.649132 0 0 0 17.649133 13.413341h4.235791a17.649132 17.649132 0 0 0 12.883867-21.35545A72.890916 72.890916 0 0 0 829.509211 127.953561a316.272448 316.272448 0 0 1 54.71231-15.354745 70.596529 70.596529 0 0 0 70.596528 28.06212c25.41475-3.176844 71.831968-32.297912 92.481453-50.829501a17.649132 17.649132 0 0 0-3.706318-28.768085c-24.708785-12.530884-77.126707-28.591594-102.541458-25.238259a73.596881 73.596881 0 0 0-60.536523 41.298969c-17.29615 3.141546-34.345211 7.589127-51.005992 13.236849a105.894793 105.894793 0 0 0 11.824919-77.47969 17.70208 17.70208 0 1 0-33.886334 10.236497c6.883162 22.061415-7.412636 57.183188-37.945634 94.069874a374.691076 374.691076 0 0 0-57.183188 39.710547 17.649132 17.649132 0 0 0 11.295444 31.062473zM935.404004 988.701736H17.649132a17.649132 17.649132 0 0 0 0 35.298264h917.754872a17.649132 17.649132 0 0 0 0-35.298264zM1041.298797 988.701736h-35.298264a17.649132 17.649132 0 0 0 0 35.298264h35.298264a17.649132 17.649132 0 0 0 0-35.298264zM174.726408 703.844743a54.888801 54.888801 0 0 1-20.825976-4.235792 57.536171 57.536171 0 0 1-29.47405-31.591946L111.542515 635.719093H35.298264c1.764913 84.009869 17.649132 146.311306 42.534409 178.785708a131.839017 131.839017 0 0 1 207.730285-8.824566A17.649132 17.649132 0 0 0 300.035247 812.210414h17.649132a17.649132 17.649132 0 0 0 17.649132-17.649132v-141.193057a35.298264 35.298264 0 0 1 35.298264-35.298264h17.649132v-58.595119l-182.315535 133.956913a51.888449 51.888449 0 0 1-31.238964 10.412988z"
                      fill="#000000" p-id="12829"></path>
                    <path
                      d="M388.280907 653.368225a17.649132 17.649132 0 0 0-17.649132 17.649132v123.543925a17.649132 17.649132 0 0 0 17.649132 17.649132h85.068817a114.189885 114.189885 0 0 1 0-158.842189zM617.719625 971.052604v-52.947397h-35.298264v52.947397a17.649132 17.649132 0 0 0 35.298264 0zM282.386114 891.631509l0 0zM185.315888 953.403471a61.771963 61.771963 0 1 1 0-123.543925 61.771963 61.771963 0 0 1 0 123.543925zM317.684379 882.806943h370.631775a16.413693 16.413693 0 0 0 12.177901-5.118249l78.185655-78.009164a17.649132 17.649132 0 0 1 12.530884-5.118248H1006.000533a17.649132 17.649132 0 0 0 0-35.298264H776.561815a16.413693 16.413693 0 0 0-12.177902 5.118248l-78.185655 78.009164a17.649132 17.649132 0 0 1-12.530884 5.118248H309.918761a119.131642 119.131642 0 0 1 7.765618 30.885982 28.944577 28.944577 0 0 1 0 4.412283z"
                      fill="#000000" p-id="12830"></path>
                    <path
                      d="M185.315888 891.631509m-26.473699 0a26.473698 26.473698 0 1 0 52.947397 0 26.473698 26.473698 0 1 0-52.947397 0Z"
                      fill="#000000" p-id="12831"></path>
                    <path
                      d="M681.256501 280.08908A17.649132 17.649132 0 0 0 705.965286 282.73645l12.883866-9.530532a17.649132 17.649132 0 0 0 2.117896-25.767733l-144.899375-171.196581a17.649132 17.649132 0 0 0-25.944224-1.23544l-13.41334 13.589832a17.649132 17.649132 0 0 0 0 24.00282zM88.245661 265.087318a17.649132 17.649132 0 0 1 17.649132-17.649133h52.947396a17.649132 17.649132 0 0 0 17.649133-17.649132v-17.649132a17.649132 17.649132 0 0 0-17.649133-17.649132H88.245661a52.947396 52.947396 0 0 0-52.947397 52.947396v352.982643h52.947397z"
                      fill="#000000" p-id="12832"></path>
                    <path
                      d="M511.824832 547.473432m17.649133 0l52.947396 0q17.649132 0 17.649132 17.649132l0 35.298264q0 17.649132-17.649132 17.649133l-52.947396 0q-17.649132 0-17.649133-17.649133l0-35.298264q0-17.649132 17.649133-17.649132Z"
                      fill="#000000" p-id="12833"></path>
                    <path
                      d="M476.526568 732.78932a79.421095 79.421095 0 1 0 79.421095-79.421095 79.597586 79.597586 0 0 0-79.421095 79.421095z m52.947397-26.473699h52.947396a17.649132 17.649132 0 0 1 0 35.298265h-52.947396a17.649132 17.649132 0 0 1 0-35.298265zM158.842189 657.427525a17.649132 17.649132 0 0 0 11.471936 10.412988 17.649132 17.649132 0 0 0 15.354745-2.823861l462.230771-340.275268a17.649132 17.649132 0 0 0 3.000353-25.767733L511.824832 139.601988a17.649132 17.649132 0 0 0-25.767733-0.882457l-172.432021 172.432021-170.490616 308.153848z m200.670633-335.333511l141.193057-123.543925a17.649132 17.649132 0 1 1 23.296855 26.473699l-141.193058 123.543925A17.649132 17.649132 0 0 1 370.631775 353.332978a17.649132 17.649132 0 0 1-11.648427-30.885981z"
                      fill="#000000" p-id="12834"></path>
                  </svg>
                  <div style="padding: 14px;background-color: #f2f2f2" @click.stop="tableQuery(item)">
                    <el-row style="margin-bottom: 5px;border-bottom: 1px solid #8f939c;">
                      <el-col :span="8" class="row-item" style="flex: 1; text-align: center;font-size: 14px">设备品牌</el-col>
                      <el-col :span="8" class="row-item" style="flex: 1; text-align: center;font-size: 14px">料仓容量</el-col>
                      <el-col :span="8" class="row-item" style="flex: 1; text-align: center;font-size: 14px">栏舍编码</el-col>
                    </el-row>
                    <el-row style="margin-bottom: 5px;">
                      <el-col :span="8" class="row-item" style="flex: 1; text-align: center;word-break: break-all;word-wrap: break-word;font-size: 14px">{{
                          item.autofeedingBand
                        }}
                      </el-col>
                      <el-col :span="8" class="row-item" style="flex: 1; text-align: center;word-break: break-all;word-wrap: break-word;font-size: 14px">{{
                          item.autofeedingNum
                        }}
                      </el-col>
                      <el-col :span="8" class="row-item" style="flex: 1; text-align: center;word-break: break-all;word-wrap: break-word;font-size: 14px">{{
                          item.phouseCode
                        }}
                      </el-col>
                      <el-col style="display: none">{{ item.fansId }}</el-col>
                    </el-row>
                  </div>

                </el-card>
              </div>

            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="2" style="margin-top: 100px">
        <svg class="icon" height="100" p-id="6924" t="1708502371103" version="1.1"
             viewBox="0 0 1024 1024" width="64" xmlns="http://www.w3.org/2000/svg" @click="goright">
          <path
            d="M277.845333 1006.933333c-7.850667 0-16.042667-3.072-21.845333-9.216a30.788267 30.788267 0 0 1 0.341333-43.690666l445.781334-441.002667L256 69.973333a30.788267 30.788267 0 0 1 0-43.690666c11.946667-11.946667 31.744-12.288 43.690667 0L768 491.178667c5.802667 5.802667 9.216 13.653333 9.216 21.845333s-3.413333 16.042667-9.216 21.845333L299.690667 998.058667c-6.144 5.802667-13.994667 8.874667-21.845334 8.874666z"
            fill="#dbdbdb" p-id="6925"></path>
        </svg>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="11">

        <div style="margin-left: 50px;">
          <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="messageParams" size="small">
            <el-form-item label="栏舍编码" prop="queryParams">
              <el-select v-model="messageParams.phouseCode" clearable filterable placeholder="请输入栏舍编码"
                         @change="tableQuery"
              >
                <el-option

                  v-for="item in parkList"
                  :key="item.phouseCode"
                  :label="item.phouseCode"
                  :value="item.phouseCode"/>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-refresh" size="mini" @click="resetTable">重置</el-button>
            </el-form-item>
          </el-form>
          <div style="height: 300px; overflow-y: auto; ">
            <el-table
              v-loading="loading"
              :data="messageList"
              height="300"
              style="width: 100%">
              <el-table-column
                fixed
                label="栏舍编码"
                prop="phouseCode"
                width="150">
              </el-table-column>
              <el-table-column
                label="栏舍类型"
                prop="phouseType"
                width="100">
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.hmy_park_type" :value="scope.row.phouseType"/>
                </template>
              </el-table-column>
              <el-table-column
                label="消耗(KG)"
                prop="materiaFeedConsumeNum"
                width="100">
              </el-table-column>
              <el-table-column
                label="饲料类型"
                prop="materiaFeedType"
                width="100">
                <!--                <template slot-scope="scope">-->
                <!--                  <dict-tag :options="dict.type.hmy_material_type" :value="scope.row.materiaFeedType"/>-->
                <!--                </template>-->
              </el-table-column>
              <el-table-column
                label="时间"
                prop="creationDate"
                width="150">
                <template slot-scope="scope">
                  {{ scope.row.creationDate.slice(0, 16) }}
                </template>
              </el-table-column>
            </el-table>
          </div>

        </div>
      </el-col>
      <el-col :span="12">
        <div class="chart-container">
          <div ref="chart" style="width: 100%; height: 400px;"></div>
        </div>
      </el-col>
    </el-row>
    <!--      保留编辑和删除-->
    <div
      v-if="contextMenuVisible"
      class="context-menu"
      :style="{ top: contextMenuTop + 'px', left: contextMenuLeft + 'px' }"
    >
      <ul>
        <li @click="handleUpdate">编辑</li>
        <li @click="handleDelete">删除</li>
      </ul>
    </div>


    <!-- 添加或修改-->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">

        <el-row>
          <el-col :span="12">
            <el-form-item label="品牌" prop="autofeedingBand">
              <el-input v-model="form.autofeedingBand" placeholder="请输入品牌"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备ID" prop="autofeedingId">
              <el-input v-model="form.autofeedingId" placeholder="请输入设备ID"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电气参数" prop="autofeedingElp">
              <el-input v-model="form.autofeedingElp" placeholder="请输入电气参数"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="饲养数量" prop="autofeedingNum">
              <el-input v-model="form.autofeedingNum" placeholder="请输入饲养数量"/>
            </el-form-item>
          </el-col>

        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="供电方式" prop="monitoPowerUp">
              <el-select
                v-model="form.monitoPowerUp"
                placeholder="请选择供电方式"
                style="width: 200px"
              >
                <el-option
                  v-for="dict in dict.type.hmy_autofeeding_power"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="内置麦克风" prop="monitoInMicro">
              <el-select
                v-model="form.monitoInMicro"
                placeholder="请选择内置麦克风"
                style="width: 200px"
              >
                <el-option
                  v-for="dict in dict.type.hmy_autofeeding_micro"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="内置扬声器" prop="monitoInSpeaker">
              <el-select
                v-model="form.monitoInSpeaker"
                placeholder="请选择内置扬声器"
                style="width: 200px"
              >
                <el-option
                  v-for="dict in dict.type.hmy_autofeeding_speaker"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="栏舍编码" prop="phouseCode">
              <el-select v-model="form.phouseCode" clearable filterable
                         placeholder="请输入设备编码"
                         style="width: 200px">
                <el-option

                  v-for="item in parkCodeList"
                  :key="item.phouseCode"
                  :label="item.phouseCode"
                  :value="item.phouseCode"/>
              </el-select>
            </el-form-item>
          </el-col>

        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="料仓容量" prop="autofeedingCapacity">
              <el-input v-model="form.autofeedingCapacity" placeholder="请输入料仓容量"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工作温度" prop="workTemp">
              <el-input v-model="form.workTemp" placeholder="温度(℃)"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工作湿度" prop="workHumidity">
              <el-input v-model="form.workHumidity" placeholder="湿度(℉)"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="质量等级" prop="qualityGrade">
              <el-input v-model="form.qualityGrade" placeholder="请输入质量等级"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电控装置" prop="electricControlGear">
              <el-input v-model="form.electricControlGear" placeholder="请输入电控装置"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="网络协议" prop="network">
              <el-input v-model="form.network" placeholder="请输入电控装置"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>

import {add, del, edit, list, selectbyid} from "@/api/hmy/autofeeding";
import * as echarts from "echarts";
import {findCode, listMsg} from "@/api/hmy/material";
import {findPhouseCodeAll} from "@/api/hmy/equipment";
import {getTypes} from "@/api/hmy/material";

export default {
  name: "autofeeding",
  dicts: ['hmy_autofeeding_power', 'hmy_park_type', 'hmy_autofeeding_micro', 'hmy_autofeeding_speaker', 'hmy_material_type',],
  data() {
    return {
      parkCodeList: [],
      parkList: [],
      //饲料类型
      typesList: [],
      messageList: [],
      messageParams: {
        type: undefined,
        //position: undefined,
        dateStart: undefined,
        dateEnd: undefined,
        phouseCode: ""
      },
      contextMenuVisible: false,
      contextMenuTop: 0,
      contextMenuLeft: 0,
      selectedContextItem: null,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 进货表格数据
      autofeedingList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 999,
        autofeedingBand: "",
        autofeedingId: "",
        phouseCode: ""


      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        autofeedingId: [
          {required: true, message: "编号不能为空", trigger: "blur"},
          {
            validator: async (rule, value, callback) => {
              var autofeedingId = this.form.autofeedingId;
              if (autofeedingId != undefined) {
                await selectbyid(autofeedingId).then(response => {
                  if (response.data != null) {
                    callback(new Error("已存在"))
                  }
                })
              }
            }, trigger: 'blur'
          }
        ],
        autofeedingBand: [
          {required: true, message: "品牌不可为空", trigger: "blur"}
        ],
        autofeedingElp: [
          {required: true, message: "电气参数不能为空", trigger: "blur"}
        ],
        autofeedingNum: [
          {required: true, message: "饲养数量不能为空", trigger: "blur"}
        ],
        phouseType: [
          {required: true, message: "栏舍类型不能为空", trigger: "blur"}
        ]
      }

    };
  },
  created() {
    this.getTypesList();
    this.getList();
  },
  methods: {
    //动态获取饲料数据
    getTypesList() {
      getTypes().then(res => {
        this.typesList = res.data;
      })
    },
    filteredParkCodeList() {
      return this.parkCodeList.filter(parkCode => {
        return !this.autofeedingList.some(park => park.phouseCode === parkCode.phouseCode);
      });
    },
    resetTable() {
      this.messageParams.phouseCode = ""
      this.tableQuery()
    },
    tableQuery(item) {
      if (item != null) {
        if (item.phouseCode != null) {
          this.messageParams.phouseCode = item.phouseCode
        }
      }
      /** 信息 */
      listMsg(this.messageParams).then(response => {
          this.messageList = response.rows;
          console.log(this.messageList)
          this.messageList.forEach(messageItem => {
            this.typesList.forEach(typeItem => {
              if (messageItem.materiaFeedType == typeItem.materiaFeedTypeId) {
                messageItem.materiaFeedType = typeItem.materiaFeedType
              }
            })
          })
          this.initChart();
        }
      );
    },
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(this.$refs.chart);
      // 指定图表的配置项和数据
      const option = {
        title: {
          text: '饲料投喂量',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: {readOnly: false},
            magicType: {type: ['line', 'bar']},
            restore: {},
            saveAsImage: {}
          }
        },
        dataZoom:
          {
            show: true,
            realtime: true,
            start: 0,
            end: 30,
            xAxisIndex: [0, 1] // 控制两个 xAxis 的 dataZoom
          },
        xAxis: {
          data: this.messageList.map(item => item.creationDate)
        },
        yAxis:
          {
            name: '投喂量(kg)',
            type: 'value',
            min: 0

          },
        series: this.seriesData()
      };

      myChart.setOption(option);
    }, /** 动态生成折线图*/
    /** 动态生成折线图系列 */
    seriesData() {
      let series = [];
      this.parkList.forEach(cloud => {
        // 筛选出具有相同设备站房代码的messageList项
        const messageItems = this.messageList.filter(item => item.phouseCode === cloud.phouseCode);
        // 生成温度数据系列
        const temperatureSeries = {
          name: '投喂量' + cloud.phouseCode,
          type: 'line',
          symbolSize: 8,
          data: messageItems.map(item => item.materiaFeedConsumeNum)
        };

        // 将生成的温度和湿度系列添加到系列数组中
        series.push(temperatureSeries);
      });
      return series;
    },
    goright() {
      this.initChart()
      // 获取滚动容器
      const container = this.$el.querySelector('.scroll-container');
      container.scrollLeft += 240;
    },
    goleft() {

      const container = this.$el.querySelector('.scroll-container');
      container.scrollLeft -= 240;
    },
    handleWheel(event) {
      // 阻止默认的滚动行为
      event.preventDefault();
      // 获取滚动容器
      const container = this.$el.querySelector('.scroll-container');
      // 计算滚动距离
      const scrollAmount = event.deltaY;
      // 应用滚动距离到滚动容器的横向滚动
      container.scrollLeft += scrollAmount;
    },
    icoeUp(d) {
      if (d.autofeedingStart === '1') {
        d.autofeedingStart = '2'
      } else {
        d.autofeedingStart = '1'
      }
      edit({"autofeedingStart": d.autofeedingStart, "id": d.id}).then(response => {
        this.$modal.msgSuccess("修改成功");
        this.open = false;
        this.getList();
      });
    },
    showDetails(item) {
      selectbyid(item.autofeedingId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "查看信息";
      });
    },
    /*右键显示*/
    showContextMenu(event, item) {
      this.contextMenuTop = event.clientY;
      this.contextMenuLeft = event.clientX;
      this.selectedContextItem = item;
      this.contextMenuVisible = true;
    },
    /*关闭*/
    hideContextMenu() {
      this.contextMenuVisible = false;
    },
    /** 查询角色列表 */
    getList() {
      this.loading = true;
      list(this.queryParams).then(response => {
          this.autofeedingList = response.rows;
          this.total = response.total;
        }
      );
      /** 信息 */
      listMsg(this.messageParams).then(response => {
          this.messageList = response.rows;
          console.log(this.messageList)
          this.messageList.forEach(messageItem => {
            this.typesList.forEach(typeItem => {
              if (messageItem.materiaFeedType == typeItem.materiaFeedTypeId) {
                messageItem.materiaFeedType = typeItem.materiaFeedType
              }
            })
          })
          this.initChart();
        }
      );
      /** 栏舍下拉选择 */
      findCode().then(response => {
          this.parkList = response.data;
          console.log(this.parkList)
          this.loading = false;
        }
      );
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },

    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        autofeedingId: undefined,
        autofeedingBand: undefined,
        autofeedingElp: undefined,
        autofeedingNum: undefined,
        monitoPowerUp: undefined,
        monitoInMicro: undefined,
        monitoInSpeaker: undefined,
        autofeedingCapacity: undefined,
        workTemp: undefined,
        workHumidity: undefined,
        qualityGrade: undefined,
        electricControlGear: undefined,
        network: undefined,
        phouseType: undefined,
        phouseCode: undefined,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      //this.resetForm("queryForm");
      this.queryParams = {};
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    //添加按钮
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加设备信息";
      findPhouseCodeAll().then(response => {
        this.parkCodeList = response.data;
        this.parkCodeList = this.filteredParkCodeList()
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const item = this.selectedContextItem;
      selectbyid(item.id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改设备信息";
      });
      this.hideContextMenu();
    },

    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != undefined) {

            edit(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            add(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const item = this.selectedContextItem;
      this.$modal.confirm('是否确认删除设备编号为"' + item.id + '"的数据项？').then(function () {
        return del(item.id);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
      this.hideContextMenu();
    },

  }
};
</script>
<!--添加样式-->
<style scoped>
.scroll-container {
  scroll-behavior: smooth;
  overflow-x: auto; /* 启用横向滚动 */
  white-space: nowrap; /* 防止内部元素换行 */
  margin: 0 auto; /* 覆盖因为 gutter 导致的外边距问题 */
  position: relative;
  max-height: 100%; /* 设置一个最大高度 */
  overflow: hidden; /* 隐藏原生滚动条 */
}

.table-body {
  display: flex; /* 使用 flex 布局 */
  flex-wrap: nowrap; /* 防止子元素换行 */
  margin: 20px 0; /* 根据需要调整内边距 */
}

.table-body .el-col {
  flex: 0 0 auto; /* 避免 flex 子项被压缩 */
  white-space: normal; /* 使列内的内容正常换行 */
}

.emessage-div {
  transition: transform 0.3s; /* 设置动画过渡效果 */
}

.emessage-div:hover {
  transform: scale(1.1); /* 鼠标悬浮时放大1.5倍 */
}

.context-menu {
  position: fixed;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.context-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.context-menu li {
  padding: 8px 16px;
  cursor: pointer;
}

.context-menu li:hover {
  background-color: #f0f0f0;
}

.parent-icon {
  position: relative;
}

.green-icon {
  font-size: 20px;
  position: absolute;
  right: 15px;
  top: 15px;
  color: green;
  z-index: 9;
}

.rea-icon {
  font-size: 20px;
  position: absolute;
  right: 15px;
  top: 15px;
  color: red;
  z-index: 9;
}

</style>
